<template>
  <div class="simulator-container">
    <!-- 顶部剩余时长显示 -->
    <div class="top-timer">
      剩余时长: {{ remainingTime }}
    </div>
    
    <!-- 主要内容区域 -->
    <div class="main-layout">
      <!-- 左侧边栏 -->
      <div class="left-sidebar">
        <!-- 用户头像和信息 -->
        <div class="user-info">
          <div class="avatar">
            <img src="/favicon.ico" alt="用户头像" />
          </div>
          <div class="user-details">
            <span class="username">试用</span>
            <div class="status-indicator online">在线</div>
          </div>
        </div>

        <!-- 统计信息 -->
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-number">1</div>
            <div class="stat-label">今日接待</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">1</div>
            <div class="stat-label">未下线</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">0</div>
            <div class="stat-label">未有效</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">0</div>
            <div class="stat-label">已有效</div>
          </div>
        </div>

        <!-- 功能菜单 -->
        <div class="function-menu">
          <div class="menu-item active">
            <i class="icon">💬</i>
            <span>工作台</span>
          </div>
          <div class="menu-item">
            <i class="icon">✉️</i>
            <span>消息</span>
          </div>
          <div class="menu-item">
            <i class="icon">🛒</i>
            <span>店铺</span>
          </div>
        </div>

        <!-- 联系人列表 -->
        <div class="contacts-section">
          <div class="section-header">
            <span>接待：3</span>
            <span>联系时间 ↑</span>
          </div>
          
          <div class="contact-list">
            <div 
              v-for="contact in contacts" 
              :key="contact.id"
              :class="['contact-item', { active: contact.id === activeContactId }]"
              @click="selectContact(contact.id)"
            >
              <div class="contact-avatar">
                <img :src="contact.avatar" :alt="contact.name" />
              </div>
              <div class="contact-info">
                <div class="contact-name">{{ contact.name }}</div>
                <div class="contact-product">{{ contact.product }}</div>
                <div class="contact-time">{{ contact.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间聊天区域 -->
      <div class="chat-area">
        <!-- 聊天头部 -->
        <div class="chat-header">
          <div class="contact-info">
            <div class="contact-avatar">
              <img :src="activeContact?.avatar" :alt="activeContact?.name" />
            </div>
            <div class="contact-details">
              <span class="contact-name">{{ activeContact?.name }}</span>
              <span class="ai-label">AI 智训</span>
            </div>
          </div>
          <div class="header-actions">
            <span class="header-tab active">首页</span>
            <span class="header-tab">训练成绩</span>
          </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages" ref="messagesContainer">
          <div 
            v-for="message in messages" 
            :key="message.id"
            :class="['message', message.type]"
          >
            <div class="message-avatar">
              <img :src="message.avatar" :alt="message.sender" />
            </div>
            <div class="message-content">
              <div class="message-info">
                <span class="sender-name">{{ message.sender }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-text" v-html="message.content"></div>
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="chat-input-area">
          <div class="input-toolbar">
            <button class="toolbar-btn">😀</button>
            <button class="toolbar-btn">📁</button>
            <button class="toolbar-btn">📷</button>
            <button class="toolbar-btn">🔗</button>
            <button class="toolbar-btn">📋</button>
            <button class="toolbar-btn">✂️</button>
            <button class="toolbar-btn">📞</button>
          </div>
          <div class="input-container">
            <textarea 
              v-model="inputMessage" 
              placeholder="请输入消息..."
              @keydown.enter.prevent="sendMessage"
              class="message-input"
            ></textarea>
            <button @click="sendMessage" class="send-button">发送</button>
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <!-- 切换标签 -->
        <div class="panel-tabs">
          <div class="tab active">智能客服</div>
          <div class="tab">快捷短语</div>
        </div>

        <!-- 客户信息 -->
        <div class="customer-info">
          <h3>客户信息</h3>
          <div class="customer-detail">
            <div class="detail-row">
              <span class="label">{{ activeContact?.name }}</span>
              <span class="value success">好评100%</span>
              <span class="value warning">待回</span>
              <span class="value info">普通</span>
            </div>
            <div class="detail-row">
              <span class="label">店铺消费：</span>
              <span class="value">¥</span>
            </div>
            <div class="detail-row">
              <span class="label">平均客单价：</span>
              <span class="value">¥</span>
            </div>
            <div class="detail-row">
              <span class="label">买家信用：</span>
              <span class="value">⭐</span>
              <span class="label">收藏好评率：</span>
              <span class="value">100%</span>
            </div>
            <div class="detail-row">
              <span class="label">买家信用：</span>
              <span class="value">—</span>
              <span class="label">发出好评率：</span>
              <span class="value">100%</span>
            </div>
            <div class="detail-row">
              <span class="label">买家信用：</span>
              <span class="value">—</span>
              <span class="label">注册时间：</span>
              <span class="value">2015-11-12</span>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="action-buttons">
            <button class="action-btn">添加备注</button>
            <button class="action-btn">发优惠券</button>
            <button class="action-btn">邀请入群</button>
          </div>

          <!-- 客询专页标签 -->
          <div class="inquiry-tabs">
            <div class="inquiry-tab active">咨询专页</div>
            <div class="inquiry-tab">足迹</div>
            <div class="inquiry-tab">信誉</div>
          </div>
        </div>

        <!-- 二维码区域 -->
        <div class="qr-section">
          <div class="qr-placeholder">
            <div class="qr-code">📱</div>
            <p>扫码服务功能</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

// 响应式数据
const remainingTime = ref('00:19:57')
const inputMessage = ref('')
const activeContactId = ref('j****')
const messagesContainer = ref(null)

// 联系人数据
const contacts = reactive([
  {
    id: 'j****',
    name: 'j****',
    avatar: '/favicon.ico',
    product: '商品卡片',
    time: '00:01',
    status: 'online'
  },
  {
    id: 'j2****',
    name: 'j2****',
    avatar: '/favicon.ico',
    product: '商品卡片', 
    time: '00:01',
    status: 'online'
  },
  {
    id: 'j3****',
    name: 'j3****',
    avatar: '/favicon.ico',
    product: '商品卡片',
    time: '00:01',
    status: 'online'
  }
])

// 消息数据
const messages = reactive([
  {
    id: 1,
    type: 'received',
    sender: 'j****',
    avatar: '/favicon.ico',
    time: '2025-05-23 09:06:30',
    content: '有美的节能电热水器吗？'
  },
  {
    id: 2,
    type: 'received',
    sender: 'j****',
    avatar: '/favicon.ico',
    time: '2025-05-23 09:06:30',
    content: '<div class="product-card">【链楼免费送】美的一级能效节能电热水器家用洗澡卫生间洗澡储水式A35</div><div class="product-link">https://detail.tmall.com/item.htm?sp...</div>'
  }
])

// 计算属性
const activeContact = computed(() => {
  return contacts.find(contact => contact.id === activeContactId.value)
})

// 方法
const selectContact = (contactId) => {
  activeContactId.value = contactId
}

const sendMessage = () => {
  if (inputMessage.value.trim()) {
    messages.push({
      id: Date.now(),
      type: 'sent',
      sender: '我',
      avatar: '/favicon.ico',
      time: new Date().toLocaleString(),
      content: inputMessage.value
    })
    inputMessage.value = ''
    
    // 自动滚动到底部
    setTimeout(() => {
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      }
    }, 100)
  }
}

// 生命周期
onMounted(() => {
  // 初始化时滚动到底部
  setTimeout(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  }, 100)
})
</script>

<style scoped>
.simulator-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f5f5;
}

.top-timer {
  background: #e74c3c;
  color: white;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  position: relative;
  z-index: 10;
}

.main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* 左侧边栏 */
.left-sidebar {
  width: 280px;
  background: #4a90e2;
  color: white;
  display: flex;
  flex-direction: column;
}

.user-info {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
}

.username {
  font-size: 18px;
  font-weight: bold;
}

.status-indicator.online {
  color: #2ecc71;
  font-size: 14px;
}

.stats-section {
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
}

.function-menu {
  display: flex;
  padding: 0 10px;
  margin-bottom: 20px;
}

.menu-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}

.menu-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.menu-item .icon {
  display: block;
  font-size: 24px;
  margin-bottom: 5px;
}

.contacts-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-header {
  padding: 10px 20px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-list {
  flex: 1;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.contact-item.active {
  background: rgba(255, 255, 255, 0.2);
}

.contact-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 15px;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-weight: bold;
  margin-bottom: 2px;
}

.contact-product {
  font-size: 12px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.contact-time {
  font-size: 12px;
  opacity: 0.6;
}

/* 中间聊天区域 */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.chat-header .contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-header .contact-avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.contact-details {
  display: flex;
  flex-direction: column;
}

.ai-label {
  background: #4a90e2;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
  width: fit-content;
}

.header-actions {
  display: flex;
  gap: 20px;
}

.header-tab {
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
}

.header-tab.active {
  color: #4a90e2;
  border-bottom-color: #4a90e2;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message {
  display: flex;
  gap: 10px;
}

.message-avatar img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.message-content {
  flex: 1;
  max-width: 70%;
}

.message-info {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
  color: #666;
}

.message-text {
  background: #f1f3f4;
  padding: 10px 15px;
  border-radius: 10px;
  line-height: 1.4;
}

.message.sent {
  flex-direction: row-reverse;
}

.message.sent .message-content {
  text-align: right;
}

.message.sent .message-text {
  background: #4a90e2;
  color: white;
}

.product-card {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.product-link {
  color: #4a90e2;
  text-decoration: underline;
  cursor: pointer;
}

.chat-input-area {
  border-top: 1px solid #e0e0e0;
}

.input-toolbar {
  padding: 10px 20px;
  display: flex;
  gap: 10px;
}

.toolbar-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  transition: background 0.3s;
}

.toolbar-btn:hover {
  background: #f0f0f0;
}

.input-container {
  display: flex;
  padding: 10px 20px;
  gap: 10px;
}

.message-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px 12px;
  resize: none;
  height: 60px;
  font-family: inherit;
}

.send-button {
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 8px 20px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}

.send-button:hover {
  background: #357abd;
}

/* 右侧信息面板 */
.right-panel {
  width: 300px;
  background: white;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  background: #f8f9fa;
  border-right: 1px solid #e0e0e0;
}

.tab.active {
  background: white;
  color: #4a90e2;
  font-weight: bold;
}

.customer-info {
  padding: 20px;
  flex: 1;
}

.customer-info h3 {
  margin-bottom: 15px;
  color: #333;
}

.customer-detail {
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 5px;
}

.label {
  color: #666;
}

.value {
  font-weight: bold;
}

.value.success {
  color: #2ecc71;
}

.value.warning {
  color: #f39c12;
}

.value.info {
  color: #3498db;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.action-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
}

.action-btn:hover {
  background: #f8f9fa;
  border-color: #4a90e2;
}

.inquiry-tabs {
  display: flex;
  margin-bottom: 20px;
}

.inquiry-tab {
  flex: 1;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}

.inquiry-tab.active {
  color: #4a90e2;
  border-bottom-color: #4a90e2;
}

.qr-section {
  padding: 20px;
  text-align: center;
}

.qr-placeholder {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 30px;
  color: #666;
}

.qr-code {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>